<template>
  <el-dialog :visible.sync="dialogVisible" width="1000px" top="8vh" :close-on-click-modal="false">
    <div slot="title">
      <div class="flex-bc mr20 top-title">
        <div class="left">密码重置</div>
        <div class="right pr20">
          <span class="el-icon-full-screen cursor" @click="fullscreen=!fullscreen"></span>
        </div>
      </div>
    </div>
    <div class="wrap">
      <el-form label-width="80px" :model="info" ref="input-form" :rules="rules">
        <el-form-item label="用户名">
          <el-input v-halfCharCode v-model="username" readonly />
        </el-form-item>
        <el-form-item label="密码" prop="password1">
          <el-input v-halfCharCode v-model="info.password1" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input v-halfCharCode v-model="info.password2" placeholder="请再次输入密码" type="password" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="save()" type="primary">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { putPassword } from "~/admin/api/user"
import { lxStr } from "~/utils/validate.js";
export default {
  computed: mapState({
    user: state => state.user.user
  }),
  data() {
    var validatePass1 = (rule, value, callback) => {
      let re = /(\w)*(\w)\2{2}(\w)*/g;
      var pwdRegex = new RegExp('(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()]).{8,15}')
      if (!pwdRegex.test(value)) {
        callback(new Error('密码长度必须不少于8位,不大于15位，并且必须同时包含数字、字母、特殊字符（特殊字符包括（英文字符）：!@#$%^&*()）'))
      } else if (!lxStr(value)) {
        callback(new Error('弱口令密码,不能连续字符（如123、abc、！@#）连续3位或3位以上'))
      } else if (re.test(value)) {
        callback(new Error('弱口令密码,不能相同字符（如111、aaa）连续3位或3位以上'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (this.info.password1 !== '') {
        if (value !== this.info.password1) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      fullscreen: false,
      info: {
        password1: '',
        password2: '',
      },
      rules: {
        password1: [
          { required: false, min: 8, max: 15, validator: validatePass1, trigger: 'change' }
        ],
        password2: [{ required: false, validator: validatePass2, trigger: 'change' }]
      },
      username: '',
    }
  },

  methods: {
    show(data) {
      this.dialogVisible = true;
      this.username = data.username;
      this.userId = data.userId;
      this.info = {
        password1: '',
        password2: '',
      };
    },

    save() {
      this.$refs['input-form'].validate(valid => {
        if (valid) {
          let param = {
            userId: this.userId,
            newpassword1: this.info.password1,
            username: this.username
          }
          putPassword(param).then(resp => {
            if (resp.status === 200) {
              this.$message.success('修改成功');
              this.dialogVisible = false;
            }
          })

        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
.execution {
  max-height: 70vh;
  overflow-y: auto;
}

.top-title {
  .left {
    font-size: 18px;
  }

  .right {
    padding-top: 4px;
    padding-right: 1px;
  }
}

.wrap {
  min-height: 150px;
}

@include dl-list(2, 20px);
</style>
